<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<!--
    xhr.upload.onprogress 事件，并恢复上传文件。
    要恢复上传，我们需要确切地知道服务器接收的字节数。而且只有服务器能告诉我们，因此我们将发送一个额外的请求。
    -->

		<script>
			// 【算法】
			// 1. 首先，创建一个文件id，以唯一地标识我们要上传的文件：
			// 在恢复上传时需要用到它，已告诉服务器我们要恢复的内容。
			// 如果名称，或大小，或最后一次修改时间发生了更改，则将有另一个fileId。
			let fileId = file.name + '-' + file.size + '-' + file.lastModified

			// 2. 向服务器发送一个请求，询问它已经有了多少字节，像这样：
			  let response = await fetch('status', {
			    headers:{
			      'X-Fild-Id':fileId
			    }
			  })

			// 服务器已有的字节数
			let startByte = +await response.text()

			// 3. 然后，我们可以使用 Blob 和 slice 方法来发送从 startByte 开始的文件：
			const xhr = new XMLHttpRequest()
			xhr.open('POST', "/upload", true)
			   // 设置请求头，文件id，以便服务器知道我们要恢复的是那个文件
			xhr.setRequestHeader('X-File-Id', fileId)
			// 发送我们要从哪个字节开始恢复，因此服务器知道我们正在恢复
			xhr.setRequestHeader('X-Start-Byte', startByte)
			xhr.upload.onprogress = (e) => {
			  // startByte 已上传的，e.loaded 当前上传的，e.total 这是当前分(从 startByte 开始的文件部分)要上传的总字节数
			  console.log(`已上传 ${startByte + e.loaded} 字节，总共 ${startByte + e.total} 字节`)
			}
			// 文件可以是来自 input.files[0] 或者另一个源
			xhr.send(file.slice(startByte))
		</script>
	</body>
</html>
